import React, { useRef, useCallback, useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { MultipleSelectProps } from './type';
import { t } from '@/locales/i18n';
import EmptyTip from '../EmptyTip';
import { Button, Cascader } from 'antd';
import { DownOutlined } from '@ant-design/icons';

const MultipleRowSelect = ({
  placeholder,
  label,
  value = [],
  list,
  emptyTip,
  maxH = 300,
  onSelect,
  popDirection = 'bottom',
  styles,
}: MultipleSelectProps) => {
  const ref = useRef<HTMLDivElement>(null);
  const [cloneValue, setCloneValue] = useState(value);

  return (
    <div ref={ref} className="relative w-full">
      <Cascader
        className="workflow-cascader"
        placeholder={placeholder ?? '设置变量值'}
        options={list}
        value={cloneValue}
        onChange={(options: any[]) => {
          setCloneValue(options);
          onSelect(options);
        }}
        style={{ width: '100%' }}
        displayRender={() => {
          return <div className="flex flex-1 flex-col flex-nowrap">{label}</div>;
        }}
        dropdownClassName="workflow-dropdown"
      />
    </div>
  );
};

export default React.memo(MultipleRowSelect);
